<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="css/forget.css"/>
		<!-- 连接外部的样式表 -->
    	<link rel="stylesheet" type="text/css" href="css/bg.css">
		<title>忘记密码</title>
		<script src="js/jquery-3.3.1.js"></script>
   		<script src="js/jquery.vide.js"></script>
   		<script type="text/javascript">
		//前台校验
		var formObj = {
				checkForm : function(){
					var canSub = true;
					canSub = this.checkNull("accountId","账号不能为空") && canSub;
					canSub = this.checkNull("phone","手机号不能为空") && canSub;
					canSub = this.checkNull("password","密码不能为空") && canSub ;
					canSub = this.checkNull("repassword","确认密码不能为空")&& canSub;
					canSub = this.checkPhone()&& canSub;
					canSub = this.checkPassword()&& canSub;
					return canSub;
				},
				//密码一致性校验
				checkPassword : function(){
					var password = $("input[name='password']").val();
					var repassword = $("input[name='repassword']").val();
					if(password!=""&&repassword!=""&&password != repassword){
						this.setMsg("repassword", "两次密码不一致");
						return false;
					}
					return true;
				},
				//手机号格式校验
				checkPhone : function(){
					var regTel=/^[1][3,4,5,7,8][0-9]{9}$/;
					var phone = $("input[name='phone']").val();
					if(phone!="" && !regTel.test(phone)){
						this.setMsg("phone", "手机号输入有误");
						return false;
					}
					return true;
				},
				//非空校验
				checkNull : function(name,msg){
					var tag = $("input[name='"+name+"']").val();
					//清空操作
					this.setMsg(name, "");
					if($.trim(tag) == ""){
						this.setMsg(name, msg);
						return false;
					}
					return true;
				},
				setMsg : function(name,msg){
					//设置信息
					$("input[name='"+name+"']").nextAll("span").text(msg).css("color","red");
				}
		};
		//文档就绪事件
		$(function(){
			//鼠标离开焦点事件
			$("input[name='accountId']").blur(function(){
				formObj.checkNull("accountId", "账号不能为空");
			});
			$("input[name='phone']").blur(function(){
				formObj.checkNull("phone", "手机号不能为空");
			});
			$("input[name='password']").blur(function(){
				formObj.checkNull("password", "密码不能为空");
			});
			$("input[name='repassword']").blur(function(){
				formObj.checkNull("repassword", "确认密码不能为空");
				formObj.checkPassword();
			});
		});
		</script>
	</head>
	<body>
	 <form action="<%=request.getContextPath() %>/ForgetServlet" method="POST" onsubmit="return formObj.checkForm()">
   		<div class="login-form">
        	<h2>忘记密码</h2>
        	<div style="color:red;text-align:center">
        		<%=request.getAttribute("forget")==null?"": request.getAttribute("forget")%>
        	</div>
        	<div class="form-input">
            	<input type="text" name="accountId" placeholder="请输入你的账号" value="<%=request.getParameter("accountId")==null?"":request.getParameter("accountId")%>">
            	<span></span>
        	</div>
        	<div class="form-input">
            	<input type="text" name="phone" placeholder="请输入你的手机号">
            	<span></span>
        	</div>
        	<div class="form-input">
            	<input type="password" name="password" placeholder="请输入你要设置的密码">
            	<span></span>
        	</div>
        	<div class="form-input">
            	<input type="password" name="repassword" placeholder="请确认你的密码">
            	<span></span>
        	</div>
        	<div class="form-radio">
           		<input type="radio" name="identity" value="student"> 学生
           		<input type="radio" name="identity" value="maintenanceworker"> 维修工人
           		<input type="radio" name="identity" value="administrator" checked="checked"> 管理员
       		</div>
        	<div class="form-input">
            	<input type="submit" name="login" value="确定">
            	<input type="button" value="返回登录" onclick="window.location.href='<%=request.getContextPath() %>/login.jsp'"/>
        	</div>
    	</div>
      </form>
	</body>
</html>